<template>
  <view :class="['empty-panel', isFixed && 'fixed']">
    <view class="icon">
      <image :src="icons" mode="widthFix" class="limit-img" />
      <!-- <img :src="icon" mode="widthFix" /> -->
    </view>
    <div class="titles">{{ title }}</div>
    <div class="name">{{ content }}</div>
  </view>
</template>
<script>
import Icons from "@/asstes/images/icon/null.png";
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";

export default defineComponent({
  name: "Empty",
  components: {},
  props: {
    text: {
      type: String,
      default: "暂无数据!",
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    icons: {
      type: String,
      default: Icons,
    },
    title: {
      type: String,
      default: '暂无学情分析权限',
    }
  },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      content: props.text,
      icons: props.icons,
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss">
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 90vh;
  z-index: -1;
}

.empty-panel {
  // margin-top: 200rpx;
  width: 100%;
  // height: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 16px;
  position: fixed;
  left: 0;
  top: 25%;

  .icon {
    margin-bottom: 20px;

    .limit-img {
      width: 328rpx;
    }
  }

  .name {
    font-size: 28rpx;
    // margin: -10px 0 0;
  }

  .titles {
    font-size: 28rpx;
    font-weight: 700;
    color: #191A1A;
    margin-bottom: 20rpx;
  }
}
</style>
